<template>
  <v-container fluid>
    <v-row class="inx-box">
      <v-col cols="12" class="inx-form">
        <v-col cols="12" class="inx-form-item">
          <v-row class="inx-form-item-row">
            <v-col cols="3">收货地址：</v-col>
            <v-col cols="7">
              <input
                type="text"
                :value="address"
                placeholder="请选择并输入地址"
                @input="inpValue('dizhi',$event)"
              />
            </v-col>
            <v-col cols="2">
              <!-- <v-icon>mdi-map-marker</v-icon> -->
            </v-col>
          </v-row>
        </v-col>
        <v-col cols="12" class="inx-form-item">
          <v-row class="inx-form-item-row">
            <v-col cols="3">联系方式：</v-col>
            <v-col cols="7">
              <input
                type="text"
                :value="mobile"
                placeholder="请输入手机"
                @input="inpValue('dianhua',$event)"
              />
            </v-col>
            <v-col cols="2">
              <!-- <v-icon>mdi-map-marker</v-icon> -->
            </v-col>
          </v-row>
        </v-col>
      </v-col>
      <v-col cols="12" class="inx-type">
        <div v-for="(item,inx) in typeList" :key="item.id">
          <v-btn
            text
            small
            :color="item.primary?'primary':''"
            @click="sleType(inx,$event)"
          >{{item.name}}</v-btn>
        </div>
      </v-col>
      <v-col cols="12" class="inx-form">
        <v-row>
          <v-col cols="12" class="inx-form-tt">请选择要购买商品</v-col>
          <v-col cols="12" class="inx-form-goods" v-for="(item,inx) in goodsList" :key="item.id">
            <v-row>
              <v-col cols="3" class="inx-form-tp">
                <img :src="item.image" />
              </v-col>
              <v-col cols="5" class="inx-form-ms">
                <v-col cols="12" class="inx-form-ms-nm">{{item.name}}</v-col>
                <v-col cols="12" class="inx-form-ms-moy">¥ {{item.price}}</v-col>
              </v-col>
              <v-col cols="4">
                <v-row>
                  <v-col cols="4" class="inx-form-redu">
                    <div @click="addOrDele(false,inx,$event)">-</div>
                  </v-col>
                  <v-col cols="4" class="inx-form-inp">
                    <input type="text" :value="item.num" @input="inptNum(inx,$event)" />
                  </v-col>
                  <v-col cols="4" class="inx-form-add">
                    <div @click="addOrDele(true,inx,$event)">+</div>
                  </v-col>
                </v-row>
              </v-col>
              <v-col cols="12" class="inx-form-divider">
                <v-divider></v-divider>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
      </v-col>
      <v-col cols="12" class="inx-fixed-box">
        <v-row class="inx-mx" v-if="mxBox">
          <v-col cols="12" class="inx-mx-item">
            <v-row>
              <v-col cols="6" class="inx-mx-item-key" style="font-weight:bold">明细</v-col>
              <v-col cols="6" class="inx-mx-item-val">
                <v-icon @click="showMxModal(false,$event)">mdi-close</v-icon>
              </v-col>
              <v-col cols="12" class="inx-form-divider">
                <v-divider></v-divider>
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="12" class="inx-mx-item" v-for="(item,index) in msTypeList" :key="index">
            <v-row>
              <v-col cols="6" class="inx-mx-item-key">{{item.key}}：</v-col>
              <v-col cols="6" class="inx-mx-item-val">{{item.val+'元'}}</v-col>
              <v-col cols="12" class="inx-form-divider" v-if="index!=(msTypeList.length-1)">
                <v-divider></v-divider>
              </v-col>
            </v-row>
          </v-col>
        </v-row>
        <v-row>
          <v-col cols="6">
            <v-row>
              <v-col cols="12" class="inx-fixed-total">
                合计：
                <span>{{count}}</span> 元
              </v-col>
              <v-col cols="12" class="inx-fixed-total-disc">优惠：0元</v-col>
            </v-row>
          </v-col>
          <!-- @click="showMxModal(true,$event)" -->
          <v-col cols="3" class="inx-fixed-total-details" ></v-col>
          <v-col cols="3" class="inx-fixed-total-sub" @click="sumbitOrder()">提交订单</v-col>
        </v-row>
      </v-col>
    </v-row>
    <vue-element-loading
      :active="isActive"
      :is-full-screen="true"
      background-color="rgba(0, 0, 0, .3)"
      color="#f5f5f5"
      text="加载中···"
    />
    <v-snackbar v-model="snackbar" :color="snackbarType" :timeout="2000" top>{{ msgText }}</v-snackbar>
  </v-container>
</template>

<script>
import VueElementLoading from "vue-element-loading";
export default {
  data() {
    return {
      mxBox: false,
      isActive: false,
      msgText: "",
      address: "",
      snackbarType: "",
      snackbar: false,
      mobile: "",
      msTypeList: [
        { key: "总计：", val: "0.00" },
        { key: "已减：", val: "0" },
        { key: "商品：", val: "0.00" },
        { key: "运费：", val: "0.00" }
      ],
      typeList: null,
      curSleType: null,
      goodsList: null,
      curPage: 1,
      isUpd: true,
      count: 0
    };
  },
  components: { VueElementLoading },
  created() {
    this.$api
      .getClassify({})
      .then(res => {
        let _list = res.data;
        for (let i in _list) {
          if (parseInt(i) == 0) {
            _list[i].primary = true;
            this.curSleType = _list[i];
          } else {
            _list[i].primary = false;
          }
        }
        this.typeList = _list;
        this.getGoodsList();
      })
      .catch(res => {});
  },
  mounted() {
    document.addEventListener("scroll", e => {
      let clientHeight = window.innerHeight;
      let scrollHeight = document.body.scrollHeight;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop + clientHeight >= scrollHeight) {
        this.dropDownLoad();
      }
    });
  },
  methods: {
    inpValue(val, e) {
      if (val == "dizhi") {
        this.address = e.target.value;
      }
      if (val == "dianhua") {
        if (/\D/.test(e.target.value)) {
          console.log("ss");
          let val = e.target.value.replace(/[^\D]/, "");
          this.mobile = val;
        } else {
          this.mobile = e.target.value;
        }
      }
    },
    countTotal() {
      let goodsList = this.goodsList;
      let count = 0;
      for (let i in goodsList) {
        if (goodsList[i].num != 0) {
          let total = (
            goodsList[i].num * parseFloat(goodsList[i].price)
          ).toFixed(2);
          count = parseFloat(total) + count;
        }
      }
      this.count = count.toFixed(2);
    },
    inptNum(inx, e) {
      let item = this.goodsList[inx];
      if (isNaN(e.target.value) || e.target.value == "") {
        item.num = 0;
      } else {
        if (/\D/.test(e.target.value)) {
          let num = e.target.value.replace(/\D/, "");
          item.num = parseInt(num);
        } else {
          if (parseInt(e.target.value) > 999) {
            item.num = 999;
          } else {
            item.num = parseInt(e.target.value);
          }
        }
      }
      this.$set(this.goodsList, inx, item);
      this.countTotal();
    },
    addOrDele(val, inx, e) {
      let num = this.goodsList[inx].num;
      let item = this.goodsList[inx];
      if (val) {
        //加
        num += 1;
      } else {
        //减
        num -= 1;
        if (num < 0) {
          num = 0;
        }
      }
      item.num = num;
      this.$set(this.goodsList, inx, item);
      this.countTotal();
    },
    dropDownLoad() {
      this.isActive = true;
      if (this.isUpd) {
        this.isUpd = false;
        this.$api
          .getGoods({
            class_id: this.curSleType.id,
            limit: 10,
            page: this.curPage
          })
          .then(res => {
            let _list = res.data.data;
            for (let i in _list) {
              _list[i].num = 0;
            }
            this.isActive = false;
            this.isUpd = true;
            this.goodsList = this.goodsList.concat(_list);
            if (res.data.data.length != 0) {
              this.curPage += 1;
            }
          })
          .catch(res => {
            this.isActive = false;
            this.isUpd = true;
          });
      }
    },
    showMxModal(val) {
      this.mxBox = val;
    },
    sleType(inx) {
      let _list = this.typeList;
      for (let i in _list) {
        if (parseInt(i) == inx) {
          _list[i].primary = true;
          this.curSleType = _list[i];
        } else {
          _list[i].primary = false;
        }
      }
      this.typeList = _list;
      this.getGoodsList();
    },
    getGoodsList() {
      this.isActive = true;
      this.curPage = 1;
      this.$api
        .getGoods({
          class_id: this.curSleType.id,
          limit: 10,
          page: this.curPage
        })
        .then(res => {
          let _list = res.data.data;
          for (let i in _list) {
            _list[i].num = 0;
          }
          this.isActive = false;
          this.goodsList = _list;
          this.curPage += 1;
          this.countTotal();
        })
        .catch(res => {
          this.isActive = false;
        });
    },
    panduan() {
      //判断
      return new Promise((resolve, reject) => {
        if (
          this.mobile == "" ||
          this.address == "" ||
          this.mobile == null ||
          this.address == null ||
          this.mobile == undefined ||
          this.address == undefined
        ) {
          this.snackbar = true;
          this.msgText = "您还有信息没填写~";
          this.snackbarType = "error";
          reject();
        } else {
          let isSle = null;
          let goodsList = this.goodsList;
          isSle = goodsList.some((item, inx) => {
            return item.num != 0 && /\d/.test(item.num);
          });
          if (isSle) {
            resolve();
          }
          if (!isSle) {
            this.snackbar = true;
            this.msgText = "您还添加商品~";
            this.snackbarType = "error";
            reject();
          }
        }
      });
    },
    sumbitOrder() {
      if (this.isUpd) {
        this.panduan()
          .then(res => {
            this.isUpd = false;
            let goodsList = this.goodsList;
            let item = [];
            this.isActive = true;
            for (let i in goodsList) {
              if (goodsList[i].num != 0 && /\d/.test(goodsList[i].num)) {
                let temVal = { id: goodsList[i].id, num: goodsList[i].num };
                item.push(temVal);
              }
            }
            this.$api
              .createOrder({
                item: item,
                mobile: this.mobile,
                address: this.address
              })
              .then(res => {
                this.isActive = false;
                this.isUpd = true;
                this.snackbar = true;
                this.msgText = res.msg;
                this.snackbarType = "cyan darken-2";
                let timeOut = setTimeout(() => {
                  this.$router.push({ path: "/pay_success" });
                  clearTimeout(timeOut);
                }, 2000);
              })
              .catch(res => {
                this.isUpd = true;
                this.isActive = false;
              });
          })
          .catch(res => {});
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.inx-box {
  padding: 8px;
  padding-bottom: 100px;
}
.inx-form {
  font-size: 14px;
  box-shadow: 0 3px 14px 0px rgba(0, 0, 0, 0.09);
  padding: 10px;
  margin-bottom: 15px;
}
.inx-type {
  font-size: 14px;
  box-shadow: 0 3px 14px 0px rgba(0, 0, 0, 0.09);
  padding: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  overflow-x: scroll;
}
.inx-type button {
  border-radius: 0;
}
.inx-form-item-row {
  display: flex;
  align-items: center;
}
.inx-form-item-row input {
  outline: none;
}
.inx-form-item {
  border-bottom: 1px solid #eaeaea;
  padding: 10px 5px;
}
.inx-form-item div {
  padding: 0;
}
.inx-form-tt {
  font-size: 12px;
  font-weight: 600;
  text-align: start;
  padding-top: 0px;
}
.inx-form-goods {
  padding: 0 16px;
}
.inx-form-tp {
  text-align: start;
}
.inx-form-tp img {
  width: 65px;
  height: 65px;
  border: 1px solid #eaeaea;
}
.inx-form-ms {
  padding-left: 0;
}
.inx-form-ms-nm {
  text-align: start;
  padding-top: 0;
}
.inx-form-ms-moy {
  text-align: start;
  padding-top: 8px;
}
.inx-form-divider {
  padding: 0 12px;
}
.inx-fixed-box {
  position: fixed;
  bottom: 0;
  box-shadow: 0 3px 14px 0px rgba(0, 0, 0, 0.09);
  left: 0;
  font-size: 14px;
  padding: 0 12px;
  background: white;
}
.inx-fixed-total {
  padding: 0;
}
.inx-fixed-total span {
  color: #e22b2b;
  font-size: 16px;
}
.inx-fixed-total-disc {
  padding: 0;
  color: #b1b1b1;
}
.inx-fixed-total-details {
  text-decoration: underline;
  color: #b1b1b1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inx-fixed-total-sub {
  color: white;
  display: flex;
  align-items: center;
  background: green;
  justify-content: center;
  padding: 12px;
}
.inx-form-redu {
  padding-right: 0;
  display: flex;
  justify-content: flex-end;
}
.inx-form-redu div {
  border-radius: 50%;
  border: 1px solid #bbb9b9;
  height: 20px;
  width: 20px;
  font-size: 20px;
  line-height: 20px;
  color: #bbb9b9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inx-form-add {
  padding-left: 0;
}
.inx-form-add div {
  border-radius: 50%;
  border: 1px solid #bbb9b9;
  height: 20px;
  width: 20px;
  font-size: 20px;
  line-height: 20px;
  color: #bbb9b9;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inx-form-inp {
  padding: 12px 0;
  display: flex;
  align-items: center;
}
.inx-form-inp input {
  width: 100%;
  text-align: center;
  outline: none;
}
.ripple-color {
  color: green !important;
  caret-color: green !important;
  background-color: green !important;
}
.inx-mx {
  box-shadow: 0 3px 14px -8px rgba(0, 0, 0, 0.09);
}
.inx-mx-item {
  padding: 0 12px;
  font-size: 14px;
}
.inx-mx-item-key {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 8px 12px;
}
.inx-mx-item-val {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 8px 12px;
}
</style>
